<template>
  <div>
    <!-- <headers></headers> -->
    <div
      style="
        height: calc(100vh);
        overflow: auto;
        padding-bottom: 0.75rem;
        background: #fafafa;
      "
    >
      <div style="padding: 0 0.75rem; padding-top: 0.75rem; position: relative">
        <img
          :src="bannerSrc ? bannerSrc : defaultSrc"
          style="width: 100%"
          alt=""
        />
        <div
          style="
            position: absolute;
            top: 20%;
            left: 8%;
            color: #fff;
            font-size: 1.5rem;
            width: calc(100vw - 0.75rem - 0.75rem - 8%);
          "
        >
          <p style="width: 100%; display: flex; flex-wrap: nowrap" v-if="!bannerSrc">
            {{init.alias.split('/')[0]}}<br/>{{init.alias.includes('/')?init.alias.split('/')[1]:''}}
          </p>
        </div>
      </div>
      <div class="bigBox">
        <div class="titleBtn">
          <span class="span" @click="goApply" v-if="!http.includes('bosheng')">
            <p style="padding: 0.8rem 0; background: #f78109">
              <img src="@/assets/mobile/icon2.png" alt="" />
              学习报名
            </p>
          </span>
          <span class="span" @click="login">
            <p style="padding: 0.8rem 0; background: #1677ff">
              <img src="@/assets/mobile/icon1.png" alt="" />
              立即登录
            </p>
          </span>
        </div>
        <div class="titleBtn" v-if="http.includes('bosheng')">
          <span
            class="span"
            @click="
              () => {
                this.$router.push({
                  path: '/apply',
                  query: { name: '特种设备' },
                });
              }
            "
          >
            <p style="padding: 0.8rem 0; background: #1677ff">特种设备报名</p>
          </span>
          <span
            class="span"
            @click="
              () => {
                this.$router.push({
                  path: '/apply',
                  query: { name: '燃气从业人员培训' },
                });
              }
            "
          >
            <p style="padding: 0.8rem 0; background: #1677ff">
              燃气从业人员报名
            </p>
          </span>
        </div>
        <div class="conter">
          <ul class="ulbox" style="margin-bottom: 0.75rem">
            <li @click="login">
              <img src="@/assets/mobile/icon/zxlx.png" alt="" />
              <span>专项练习</span>
            </li>
            <li @click="login">
              <img src="@/assets/mobile/icon/kcxx.png" alt="" />
              <span>课程学习</span>
            </li>
            <li @click="login">
              <img src="@/assets/mobile/icon/mnks.png" alt="" />
              <span>模拟考试</span>
            </li>
            <li @click="login">
              <img src="@/assets/mobile/icon/zsks.png" alt="" />
              <span>正式考试</span>
            </li>
          </ul>
          <ul class="ulbox">
            <li @click="login">
              <img src="@/assets/mobile/icon/cttk.png" alt="" />
              <span>错题题库</span>
            </li>
            <li @click="login">
              <img src="@/assets/mobile/icon/sctk.png" alt="" />
              <span>收藏题库</span>
            </li>
            <li @click="login">
              <img src="@/assets/mobile/icon/stss.png" alt="" />
              <span>试题搜索</span>
            </li>
            <li>
              <img src="@/assets/mobile/icon/czzn.png" alt="" />
              <span>操作指南</span>
            </li>
          </ul>
        </div>
        <div
          style="
            margin-top: 0.75rem;
            margin-left: 0.75rem;
            font-size: 1.02rem;
            font-weight: 600;
            color: #000;
          "
        >
          <span> 培训科目 </span>
          <p
            style="
              margin: 0;
              float: right;
              font-size: 0.75rem;
              padding: 0.3rem 0.5rem 0.3rem;
              font-weight: 500;
              background: #fff;
              margin-right: 0.75rem;
              border-radius: 4px;
            "
          >
            左右滑动查看更多科目
          </p>
        </div>
        <ul
          class="gzBox"
          style="
            padding-bottom: 0.75rem;
            margin-top: 0.75rem;
            margin-left: 0.75rem;
            width: calc(100% - 0.75rem - 0.75rem);
            overflow: auto;
            display: flex;
            white-space: nowrap;
          "
        >
          <li
            :class="gz == item ? 'actiov' : ''"
            v-for="(item, index) in gzlist"
            :key="index"
            @click="getdata(item)"
            style="
              padding: 7px 12px;
              display: inline-block;
              white-space: nowrap;
              background: #fff;
            "
          >
            {{ item
            }}{{ platform("xingye") || platform("huadi") ? "" : "人员" }}
          </li>
        </ul>
        <div
          class="conter"
          style="margin-top: 0; background: transparent; padding-top: 0"
        >
          <div class="content-li-box">
            <ul>
              <li
                :class="index % 2 == 0 ? 'noneLi' : ''"
                v-for="(it, index) in dataList"
                :key="it.id"
                @click="goApply(gz, it)"
              >
                <span>
                  {{ it.title }}
                </span>
              </li>
            </ul>
          </div>
        </div>
        <div class="conter">
          <div class="content-title">
            <span>培训公告</span>
            <p
              style="margin: 0"
              @click="
                () => {
                  this.$router.push('/regulations');
                }
              "
            >
              更多>
            </p>
          </div>
          <div class="content-px-box">
            <li v-for="item in pxlist" :key="item.id" @click="clickLi(item)">
              <div>
                <span>
                  {{ item.title }}
                </span>
                <!-- {{item.update_time?item.update_time.split(' ')[0]:item.create_time.split(' ')[0]}} -->
                <p>{{ item.create_time }}</p>
              </div>
              <img :src="item.cover ? item.cover : imgsrc" alt="" />
            </li>
          </div>
        </div>
        <div class="conter">
          <div class="content-title">
            <span>政策法规</span>
            <p
              style="margin: 0"
              @click="
                () => {
                  this.$router.push('/training');
                }
              "
            >
              更多>
            </p>
          </div>
          <div class="content-zc-box">
            <li v-for="item in zclist" :key="item.id" @click="clickLiA(item)">
              <span>
                {{ item.title }}
              </span>
              <!-- {{item.update_time?item.update_time.split(' ')[0]:item.create_time.split(' ')[0]}} -->
              <p>{{ item.create_time }}</p>
            </li>
          </div>
        </div>
        <footers></footers>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import headers from "../header";
import footers from "../footer";
import { articleList, subjectList } from "@/api/apply.js";
import "@/styles/mobile.css";
export default {
  computed: {
    ...mapGetters(["init", "http"]),
  },
  components: {
    headers,
    footers,
  },
  data() {
    return {
      bannerSrc: "",
      defaultSrc: require("@/assets/mobile/banner.png"),
      list: [
        {
          id: 1,
          title: 111,
        },
        {
          id: 2,
          title: 111,
        },
        {
          id: 3,
          title: 111,
        },
        {
          id: 4,
          title: 111,
        },
        {
          id: 5,
          title: 111,
        },
      ],
      pxlist: [],
      zclist: [],
      dataList: [],
      imgsrc: require("@/assets/pxgg.jpg"),
      imgsrc2: require("@/assets/zcfg.jpg"),
      gzlist: [],
      gz: "",
    };
  },
  methods: {
    seach(name) {
      articleList({ page: 1, limit: 3, category: name }).then((res) => {
        if (res.code == 200) {
          if (name == "培训动态") {
            this.pxlist = res.data.list;
          } else {
            this.zclist = res.data.list;
          }
        }
      });
    },
    clickLi(row) {
      this.$router.push({
        path: "/regulations/details",
        query: {
          content: row.content,
          title: row.title,
          date: row.create_time,
        },
      });
    },
    clickLiA(row) {
      this.$router.push({
        path: "/training/details",
        query: {
          src: row.file,
        },
      });
    },
    goApply(name, data) {
      let path = "/apply";
      if (this.http.indexOf("zaah") != -1) {
        path = "applyzaah";
      } else {
        path = "/apply";
      }
      if (typeof name === "string") {
        this.$router.push({
          path: path,
          query: {
            name,
            id: data.id,
          },
        });
      } else {
        this.$router.push({
          path: path,
        });
      }
    },
    getdata(item) {
      this.gz = item;
      // let list = this.init.selected_gz.split(',')
      this.loading = true;
      subjectList(item).then((res) => {
        this.loading = false;
        this.dataList = res;
      });
      // for(let i=0;i<list.length;i++){
      //     let item = list[i]
      //     let index = i
      //     await
      // }
      // this.dataList.sort(this.compare('srot'))
    },
    compare(prop) {
      return (a, b) => {
        // return (a.srot - b.srot)
        let value1 = a[prop];
        let value2 = b[prop];
        return value1 - value2;
      };
    },
    login() {
      window.open(this.http + "/user", "_self");
    },
  },
  created() {
    let obj = JSON.parse(this.init.setting);

    if (obj.bannerOfMobile != "") {
      this.bannerSrc = obj.bannerOfMobile;
    }

    // console.log(this.init.alias);
    this.gzlist = this.init.selected_gz.split(",");
    this.gz = this.gzlist[0];
    this.getdata(this.gz);
    this.seach("培训动态");
    this.seach("政策法规");
  },
};
</script>
<style>
:root {
  font-size: 16px;
}

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
</style>
<style lang="scss" scoped>
.bigBox {
  padding: 0 0.75rem;
  // background: #F5F5F5;
  width: 100vw;
  position: relative;
  padding-top: 0.75rem;
}
.titleBtn {
  // position: absolute;
  // top: -2.375rem;
  border-radius: 6px;
  height: 4.75rem;
  width: calc(100%);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding:0 2.5rem;

  span {
    padding: 0 2.5rem;
    font-size: 1rem;
    color: #333;
    display: flex;
    height: 100%;
    width: 47%;
    align-items: center;
    justify-content: center;
    img {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0.8rem;
    }
  }
  p {
    // margin:0 2.5rem;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    border-radius: 5px;
  }
  .span {
    padding: 0;
    display: flex;
    // &::after{
    //     content:'';
    //     width: 1px;
    //     height:2.5vh;
    //     // margin-left:2.5rem;
    //     border-right:1px solid #ddd;
    // }
  }
}
.conter {
  // margin-top:3.125rem;
  border-radius: 6px;
  margin-top: 0.75rem;
  background: #fff;
  // width: calc(100% - 1.5rem);
  padding: 1.8vh 3.2vw;
  .content-title {
    & > span {
      display: inline-block;
      // padding:18px 0;
      font-size: 1rem;
      font-weight: 600;
      color: #333333;
      &::after {
        content: "";
        display: block;
        margin-top: 8px;
        height: 4px;
        width: 2rem;
        background: linear-gradient(to right, #1677ff, #31afff, #ffffff);
      }
    }
    & > p {
      font-size: 0.8rem;
      color: #999;
      float: right;
      cursor: pointer;
      padding-top: 5px;
    }
  }
  .content-li-box {
    margin-top: 5px;
    & > ul {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      justify-content: space-between;

      & > li {
        list-style-type: none;
        width: 42vw;
        height: 13vh;
        // margin-left:0.75rem;
        margin-top: 0.75rem;
        background: #fff;
        // background: #F9F9F9;
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        cursor: pointer;
        border-radius: 6px;

        span {
          color: #000;
          font-size: 1rem;
        }

        &:hover {
          background: #1677ff;
          span {
            color: #fff;
          }
        }
      }
    }
  }
  .noneLi {
    margin-left: 0 !important;
  }
  .content-px-box {
    display: flex;
    flex-direction: column;
    li {
      display: flex;
      justify-content: space-between;
      flex: 1;
      height: 12vh;
      padding-top: 1.8vh;
      img {
        width: 26.7vw;
        height: 12vh;
      }
      div {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-right: 3.2vw;
        span {
          font-size: 1rem;
          font-weight: 700;
        }
      }
    }
  }
  .content-zc-box {
    display: flex;
    flex-direction: column;
    li {
      display: flex;
      justify-content: space-between;
      // flex:1;
      height: 12vh;
      padding: 1.8vh 0;
      flex-direction: column;
      border-bottom: 1px solid #ddd;
      span {
        font-size: 1rem;
        font-weight: 700 !important;
      }
      p {
        color: rgba($color: #999999, $alpha: 1);
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .ulbox {
    display: flex;
    height: 55px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    // margin:8px 0;
    li {
      display: flex;
      width: 100px;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      img {
        width: 32px;
        height: 32px;
      }
      span {
        font-size: 0.75rem;
      }
    }
  }
}
.gzBox {
  li {
    border-radius: 8px;
    margin-left: 0.75rem;
    &:first-child {
      margin-left: 0;
    }
  }
  .actiov {
    background: #1677ff !important;
    color: #fff !important;
  }
}
</style>